<template>
	<div>
		<h1>vue2双向数据绑定原理</h1>
		<button @click="change">触发</button>
		{{obj.name}}
	</div>

</template>

<script>
	export default {
		created() {},
		components: {},
		data() {
			return {
				obj: {
					name: '张三',
					hob:{
						type:'football'
					}
				}
			}
		},

		methods: {
			change() {
				this.obj.hob.type = 'basketball'
			},
		},
		watch: {
			// 这样监听不到
			// obj(val) {
			// 	console.log('改变',val)
			// },
			
			// 这里可以监听到
			obj:{
				deep:true,
				handler(val){
					console.log('改变',val)
				},
			},

		},

	}
</script>

<style scoped>
</style>